<template>
  <div>
    <!-- 通过父组件给子组件传递函数类型的props实现  :子给父传递数据   -->
    <MySchool :getSchoolName = "getSchoolName"/>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件实现    :子给父传递数据 第一种写法:(采用v-on或者@符进行实现)  -->
    <MyStudent @getStudentName="getStudentName"/>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件实现    :子给父传递数据 第二种写法:(采用ref实现，更加灵活，可以按需进行触发  -->
    <MyStudent ref="student"/>
  </div>
</template>

<script>
import MySchool from './components/MySchool.vue'
import MyStudent from './components/MyStudent.vue'

export default {
  name: 'App',
  components:{
    MySchool: MySchool,
    MyStudent: MyStudent
  },
  methods:{
    getSchoolName(schoolName){
      console.log("app收到了School组件的名字:",schoolName)
    },
    getStudentName(studentName,...params){
      console.log("app收到了Student组件的名字:",studentName,params)
    }
  },
  mounted() {
    setTimeout(() => {
      /*
      * this.$refs.student  表示拿到当前的组件实例对象
      * $once:表示该事件只触发一次
      * （getStudentName", this.getStudentName）:表示触发该事件时，会调用父组件实例上的getStudentName方法
      *
      * */
      this.$refs.student.$once("getStudentName", this.getStudentName)
    },5000)
  }
}
</script>


